React Suspense 조율: 병렬 데이터 가져오기 마스터하기

React Suspense는 비동기 작업, 특히 데이터 가져오기를 처리하는 방식에 혁명을 일으켰습니다. 이를 통해 구성 요소는 데이터 로드를 기다리는 동안 렌더링을 "일시 중지"할 수 있으며, 로딩 상태를 관리하는 선언적인 방법을 제공합니다. 그러나 개별 데이터 가져오기를 단순히 Suspense로 감싸는 것은 한 번의 가져오기가 완료된 후에 다음 가져오기가 시작되는 폭포수 효과를 초래하여 성능에 부정적인 영향을 미칠 수 있습니다. 이 블로그 게시물에서는 Suspense를 사용하여 여러 데이터 가져오기를 병렬로 조율하기 위한 고급 전략을 깊이 파고들어, 애플리케이션의 응답성을 최적화하고 전 세계 사용자를 위한 사용자 경험을 향상시키는 방법을 다룹니다.

데이터 가져오기에서 폭포수 문제 이해하기

이름, 아바타, 최근 활동이 포함된 사용자 프로필을 표시해야 하는 시나리오를 상상해 보세요. 각 데이터를 순차적으로 가져오면 사용자는 이름에 대한 로딩 스피너를 본 다음, 아바타에 대한 스피너를 보고, 마지막으로 활동 피드에 대한 스피너를 보게 됩니다. 이 순차적인 로딩 패턴은 폭포수 효과를 일으켜 전체 프로필 렌더링을 지연시키고 사용자에게 불쾌감을 줍니다. 다양한 네트워크 속도를 가진 해외 사용자에게는 이 지연이 훨씬 더 두드러질 수 있습니다.

다음은 간소화된 코드 스니펫입니다:

function UserProfile() {
  const name = useName(); // 사용자 이름을 가져옵니다.
  const avatar = useAvatar(name); // 이름에 따라 아바타를 가져옵니다.
  const activity = useActivity(name); // 이름에 따라 활동을 가져옵니다.

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

이 예에서 useAvatar와 useActivity는 useName의 결과에 의존합니다. 이는 명확한 폭포수 효과를 만듭니다. 즉, useName이 완료될 때까지 useAvatar와 useActivity는 데이터 가져오기를 시작할 수 없습니다. 이는 비효율적이며 흔한 성능 병목 현상입니다.

Suspense를 이용한 병렬 데이터 가져오기 전략

Suspense로 데이터 가져오기를 최적화하는 핵심은 모든 데이터 요청을 동시에 시작하는 것입니다. 다음은 여러분이 활용할 수 있는 몇 가지 전략입니다:

1. React.preload 및 리소스를 사용한 데이터 사전 로딩

가장 강력한 기술 중 하나는 컴포넌트가 렌더링되기 전에 데이터를 미리 로드하는 것입니다. 이는 "리소스"(데이터 가져오기 프라미스를 캡슐화하는 객체)를 생성하고 데이터를 미리 가져오는 것을 포함합니다. React.preload는 이 작업을 돕습니다. 컴포넌트가 데이터를 필요로 할 때쯤에는 이미 데이터를 사용할 수 있어 로딩 상태를 거의 완전히 제거할 수 있습니다.

제품을 가져오기 위한 리소스를 생각해 보세요:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// 사용법:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

이제 ProductDetails 컴포넌트가 렌더링되기 전에 이 리소스를 미리 로드할 수 있습니다. 예를 들어, 라우트 전환 중이나 마우스 오버 시에 사용할 수 있습니다.

React.preload(productResource);

이렇게 하면 ProductDetails 컴포넌트가 데이터를 필요로 할 때 데이터가 이미 준비되어 있어 로딩 상태를 최소화하거나 제거할 수 있습니다.

2. Promise.all을 사용한 동시 데이터 가져오기

또 다른 간단하고 효과적인 접근 방식은 Promise.all을 사용하여 단일 Suspense 경계 내에서 모든 데이터 가져오기를 동시에 시작하는 것입니다. 이는 데이터 종속성이 미리 알려진 경우에 잘 작동합니다.

사용자 프로필 예시로 돌아가 봅시다. 데이터를 순차적으로 가져오는 대신, 이름, 아바타, 활동 피드를 동시에 가져올 수 있습니다:

import { useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: '사진을 게시했습니다.' },
    { id: 2, text: '프로필을 업데이트했습니다.' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="사용자 아바타" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>아바타 로딩 중...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>활동 로딩 중...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

그러나 Avatar와 Activity 각각이 fetchName에 의존하지만 별도의 Suspense 경계 내에서 렌더링되는 경우, fetchName 프라미스를 부모로 올리고 React Context를 통해 제공할 수 있습니다.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: '사진을 게시했습니다.' },
    { id: 2, text: '프로필을 업데이트했습니다.' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="사용자 아바타" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>아바타 로딩 중...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>활동 로딩 중...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. 병렬 가져오기를 관리하는 커스텀 훅 사용하기

잠재적으로 조건부 데이터 종속성이 있는 더 복잡한 시나리오의 경우, 병렬 데이터 가져오기를 관리하고 Suspense가 사용할 수 있는 리소스를 반환하는 커스텀 훅을 생성할 수 있습니다.

import { useState, useEffect, useRef } from 'react';

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (!mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('리소스를 아직 초기화하지 않았습니다.');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// 사용 예시:
async function fetchUserData(userId) {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: '사용자 ' + userId };
}

async function fetchUserPosts(userId) {
  // API 호출 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: '게시물 1' }, { id: 2, title: '게시물 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>사용자 데이터 로딩 중...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

이 접근 방식은 훅 내에서 프라미스 및 로딩 상태 관리의 복잡성을 캡슐화하여 컴포넌트 코드를 더 깔끔하게 만들고 데이터 렌더링에 집중하도록 합니다.

4. 스트리밍 서버 렌더링을 통한 선택적 하이드레이션

서버 렌더링 애플리케이션의 경우, React 18은 스트리밍 서버 렌더링을 통한 선택적 하이드레이션을 도입했습니다. 이는 서버에서 HTML을 사용할 수 있게 되는 대로 클라이언트에게 청크 단위로 보낼 수 있도록 합니다. 느리게 로드되는 컴포넌트를 <Suspense> 경계로 감싸면, 느린 컴포넌트가 서버에서 로드되는 동안 나머지 페이지는 상호작용 가능하게 만들 수 있습니다. 이는 특히 네트워크 연결이 느리거나 장치 성능이 낮은 사용자에게 체감 성능을 극적으로 향상시킵니다.

뉴스 웹사이트가 세계 여러 지역(예: 아시아, 유럽, 아메리카)의 기사를 표시해야 하는 시나리오를 생각해 보세요. 일부 데이터 소스는 다른 소스보다 느릴 수 있습니다. 선택적 하이드레이션은 더 빠른 지역의 기사를 먼저 표시하고, 느린 지역의 기사가 로드되는 동안 페이지 전체가 차단되는 것을 방지합니다.

오류 및 로딩 상태 처리하기

Suspense가 로딩 상태 관리를 단순화하지만, 오류 처리는 여전히 중요합니다. 오류 경계(componentDidCatch 생명주기 메서드 또는 \`react-error-boundary\`와 같은 라이브러리의 useErrorBoundary 훅 사용)는 데이터 가져오기 또는 렌더링 중에 발생하는 오류를 우아하게 처리할 수 있도록 합니다. 이러한 오류 경계는 특정 Suspense 경계 내에서 오류를 잡아내어 전체 애플리케이션이 충돌하는 것을 방지하도록 전략적으로 배치되어야 합니다.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... 오류가 발생할 수 있는 데이터 가져오기
}

function App() {
  return (
    <ErrorBoundary fallback={<div>문제가 발생했습니다!</div>}>
      <Suspense fallback={<div>로딩 중...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

로딩 및 오류 상태 모두에 대해 유익하고 사용자 친화적인 대체 UI를 제공해야 합니다. 이는 네트워크 속도가 느리거나 지역 서비스 중단을 겪을 수 있는 해외 사용자에게 특히 중요합니다.

Suspense로 데이터 가져오기를 최적화하기 위한 모범 사례

• 중요 데이터 식별 및 우선순위 지정: 애플리케이션의 초기 렌더링에 필수적인 데이터를 파악하고 해당 데이터를 먼저 가져오도록 우선순위를 지정합니다.
• 가능한 경우 데이터 사전 로드: React.preload 및 리소스를 사용하여 컴포넌트가 필요로 하기 전에 데이터를 미리 로드하여 로딩 상태를 최소화합니다.
• 데이터 동시 가져오기: Promise.all 또는 커스텀 훅을 활용하여 여러 데이터 가져오기를 병렬로 시작합니다.
• API 엔드포인트 최적화: API 엔드포인트가 성능에 최적화되어 있는지 확인하여 지연 시간과 페이로드 크기를 최소화합니다. GraphQL과 같은 기술을 사용하여 필요한 데이터만 가져오는 것을 고려해 보세요.
• 캐싱 구현: 자주 액세스하는 데이터를 캐시하여 API 요청 수를 줄입니다. 강력한 캐싱 기능을 위해 \`swr\` 또는 \`react-query\`와 같은 라이브러리 사용을 고려해 보세요.
• 코드 스플리팅 사용: 초기 로드 시간을 줄이기 위해 애플리케이션을 더 작은 청크로 분할합니다. 코드 스플리팅을 Suspense와 결합하여 애플리케이션의 다른 부분을 점진적으로 로드하고 렌더링합니다.
• 성능 모니터링: Lighthouse 또는 WebPageTest와 같은 도구를 사용하여 애플리케이션의 성능을 정기적으로 모니터링하여 성능 병목 현상을 식별하고 해결합니다.
• 오류를 우아하게 처리: 데이터 가져오기 및 렌더링 중 발생하는 오류를 잡아내고 사용자에게 유익한 오류 메시지를 제공하기 위해 오류 경계를 구현합니다.
• 서버 사이드 렌더링(SSR) 고려: SEO 및 성능상의 이유로 스트리밍 및 선택적 하이드레이션을 통해 SSR을 사용하여 더 빠른 초기 경험을 제공하는 것을 고려해 보세요.

결론

React Suspense는 병렬 데이터 가져오기 전략과 결합될 때, 반응성 있고 성능이 뛰어난 웹 애플리케이션을 구축하기 위한 강력한 도구 모음을 제공합니다. 폭포수 문제를 이해하고 사전 로딩, Promise.all을 사용한 동시 가져오기, 커스텀 훅과 같은 기술을 구현함으로써 사용자 경험을 크게 향상시킬 수 있습니다. 전 세계 사용자에게 애플리케이션이 최적화된 상태를 유지하도록 오류를 우아하게 처리하고 성능을 모니터링하는 것을 잊지 마세요. React가 계속 발전함에 따라, 스트리밍 서버 렌더링을 통한 선택적 하이드레이션과 같은 새로운 기능을 탐색하는 것은 위치나 네트워크 조건에 관계없이 탁월한 사용자 경험을 제공하는 능력을 더욱 향상시킬 것입니다. 이러한 기술을 수용함으로써 기능적일 뿐만 아니라 전 세계 사용자들이 즐겁게 사용할 수 있는 애플리케이션을 만들 수 있습니다.

이 블로그 게시물은 React Suspense를 사용한 병렬 데이터 가져오기 전략에 대한 포괄적인 개요를 제공하는 것을 목표로 했습니다. 이 정보가 유익하고 도움이 되셨기를 바랍니다. 여러분의 프로젝트에서 이러한 기술을 실험하고 결과를 커뮤니티와 공유하시기를 권장합니다.